<html>

<head>
    <meta charset="utf-8">

    <!--<title>海洋牧场智慧可视化系统</title>-->
    <title>{{ title }}</title>
    <!-- <link rel="stylesheet" href="../static/css/dataCenter.css">  -->
    <link rel="stylesheet" type="text/css" href= "{{ url_for('static', filename = 'css/dataCenter.css') }}">

    <script src="../static/js/dataCenter/jquery.js"></script>
    <script>
        $(function() {
            $('.myscroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });
        })

        $(document).ready(function() {
            var whei = $(window).width()
            $("html").css({
                fontSize: whei / 22
            });
            $(window).resize(function() {
                var whei = $(window).width();
                $("html").css({
                    fontSize: whei / 22
                })
            });
        });
    </script>
</head>

<body>

    <div class="main">
        <div class="header">
            <div class="topbnt_left fl">
                <ul>
                    <li><a href="/mainInfo">主要信息</a></li>
                    <li><a href="/waterSystem">水下系统</a></li>
                </ul>
            </div>
            <h1 class="tith1 fl">海洋牧场智慧可视化系统</h1>
            <div class=" fr topbnt_right">
                <ul>
                    <li><a href="/dataCenter">数据中心</a></li>
                    <li><a href="/smartCenter">智能中心</a></li>
                </ul>
            </div>
            <a href="/admain" class="admain"></a>
        </div>
        </div>

        <!--中间-->
        <div class="content">
            <!--左边-->
            <div class="content-left fl">
                <!--左上-->
                <div class="left-top">
                    <div class="title">
                        <span>基本信息</span>
                    </div>
                    <div class="list">
                        <p>海洋牧场智慧可视化系统数据中心，为您提供全面的海洋养殖信息，助您掌握养殖情况，做出明智的决策。</p>
                        <ul>
                            <li>建筑面积：1168亩</li>
                            <li>渔户总数：867户</li>
                            <li>所在河流：Ohio River</li>
                            <li>年总产值：680万</li>
                            <li>年总产值：4651万</li>
                            <li>年总产值：4546万</li>
                        </ul>
                    </div>
                </div>
                <!--左中-->
                <div class="left-center">
                    <div class="title">
                        <span>鱼类品种</span>
                    </div>
                    <div class="allnav" id="ceshi"></div>
                </div>
                <!--左下-->
                <div class="left-bottom">
                    <div class="title">
                        <span>产量/鱼排面积</span>
                    </div>
                    <div class="allnav" id="ceshi2"></div>
                </div>
            </div>
            <!--中间-->
            <div class="content-center fl">
                <!--头部-->
                <div class="center-top">
                    <div class="top-title">
                        <ul>
                            <li>
                                <p>各地流域水质</p>
                                <!--<span>3</span>-->
                                <span>2</span>
                                <span>3</span>
                                <b>个</b>
                            </li>
                        </ul>
                    </div>
                    <div class="top-bottom">
                        <div class="allnav" id="ceshi8"></div>
                    </div>

                </div>
                <!--底部-->
                <div class="center-bottom">
                    <div class="bottom-left fl">
                        <div class="allnav" id="ceshi6"></div>
                    </div>
                    <div class="bottom-right fr">
                        <div class="allnav" id="ceshi7" style="width: 100%;height: 100%;"></div>
                    </div>
                </div>
            </div>
            <!--右边-->
            <div class="content-right fr">
                <!--右上-->
                <div class="right-top">
                    <!--选项卡内容-->
                    <div id="tab_header">
                        <ul>
                            <li class="selected">设备信息</li>
                            <li>基地信息</li>
                        </ul>
                    </div>
                    <!--内容-->
                    <div id="tab_content">
                        <div class="dom" style="display: block">
                            <ul>
                                <li>
                                    <p>供氧系统</p>
                                    <span>{{device.供氧系统}}</span>
                                </li>
                                <li>
                                    <p>警告状态</p>
                                    <span>{{device.警告状态}}</span>
                                </li>
                                <li>
                                    <p>可见光摄像</p>
                                    <span>{{device.可见光摄像头}}</span>
                                </li>
                            </ul>
                            <div class="list-t">
                                <ul>
                                    <li>
                                        <span>{{quality.水温}}°C</span>
                                        <p>水温</p>
                                    </li>
                                    <li>
                                        <span>{{quality.PH}}</span>
                                        <p>PH</p>
                                    </li>
                                    <li>
                                        <span>{{quality.溶解氧}}mg/l</span>
                                        <p>溶解氧</p>
                                    </li>
                                    <li>
                                        <span>{{quality.浊度}}NTU</span>
                                        <p>浊度</p>
                                    </li>
                                    <li>
                                        <span>{{quality.总氮}}mg/L</span>
                                        <p>总氮</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="dom" style="display: none">
                            <div class="listStyle">
                                <span>鱼排：<strong>560</strong>个</span>
                                <span>供应企业：<strong>36</strong>家</span>
                                <span>经销商：<strong>540</strong>个</span>
                                <span>供应链：<strong>15</strong>条</span>
                                <span>水产品加工基地：<strong>20</strong>个</span>
                                <span>售后卸载：<strong>29</strong>家</span>
                                <span>冷冻基地：<strong>10</strong>个</span>
                                <span>冷冻车：<strong>120</strong>台</span>
                            </div>
                        </div>
                    </div>
                    <!--选项卡内容-->
                </div>
                <!--右中-->
                <div class="right-center">
                    <div class="title">
                        <span>各流域水质</span>
                    </div>

                    <div class="echart wenzi">
                        <div class="gun">
                            <span>省份</span>
                            <span>流域</span>
                            <span>温度</span>
                            <span>PH</span>
                            <span>站点情况</span>
                        </div>
                        <div id="FontScroll" class="myscroll">
                            <ul>
                                {% for item in basin_data %}
                                <li>
                                    <div class="fontInner clearfix">
                                        <span>{{ item.省份 }}</span>
                                        <span>{{ item.流域 }}</span>
                                        <span>{{ item.温度 }}</span>
                                        <span>{{ item.PH }}</span>
                                        <span>{{ item.站点情况 }}</span>
                                    </div>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
                <!--右下-->
                <div class="right-bottom">
                    <div class="title">
                        <span>水产品成交价</span>
                    </div>
                    <div class="right-bottom-t">
                        <div class="b-left" id="ceshi3"></div>
                        <div class="b-cent" id="ceshi4"></div>
                        <div class="b-right" id="ceshi5"></div>
                    </div>
                </div>
            </div>
        </div>



    </div>


    <script src="../static/js/dataCenter/echarts.min.js"></script>
    <script src="../static/js/dataCenter/jquery.min.js"></script>

    <script>
        // 将后端传递的数据定义为全局变量
        var data1 = {{ data|safe }}; var legend1 = {{ legend|safe }};
        var supply = {{ supply|safe }};
        var chinaDatas = {{ chinaDatas|safe }};
        var yield_data = {{ yield_data|safe }};
        var all_yield  = {{all_yield|safe}};
    </script>
    <script src="../static/js/dataCenter/echart.js"></script>


    <script src="../static/js/dataCenter/fontscroll.js"></script>
    <script src="../static/js/dataCenter/china.js"></script>





    <script>
        //顶部时间
        function getTime() {
            var myDate = new Date();
            var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
            var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
            var myToday = myDate.getDate(); //获取当前日(1-31)
            var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
            var myHour = myDate.getHours(); //获取当前小时数(0-23)
            var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
            var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
            var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var nowTime;

            nowTime = myYear + '-' + fillZero(myMonth) + '-' + fillZero(myToday) + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
            //console.log(nowTime);
            $('#time').html(nowTime);
        };

        function fillZero(str) {
            var realNum;
            if (str < 10) {
                realNum = '0' + str;
            } else {
                realNum = str;
            }
            return realNum;
        }
        setInterval(getTime, 1000);
    </script>
    <script>
        $(function() {
            var allLis = document.getElementById("tab_header").getElementsByTagName("li");
            var allDom = document.getElementById("tab_content").getElementsByClassName("dom");

            // console.log(allLis, allDom);

            // 2. 遍历监听
            for (var i = 0; i < allLis.length; i++) {
                var li = allLis[i];
                li.index = i;

                li.onclick = function() {
                    console.log(i);
                    for (var j = 0; j < allLis.length; j++) {
                        allLis[j].className = '';
                        allDom[j].style.display = 'none';
                    }

                    this.className = 'selected';
                    allDom[this.index].style.display = 'block';

                }
            }
        })
    </script>


</body>

</html>